export default function count(a, b) {
	return a - b
}
export const a=3
// babel-loader babel是一个loader
// https://webpack.docschina.org/loaders/babel-loader/
// 一.
// webpack-dev-server 插件 运行指令：npx webpack server
//开发模式下在内存中运行： webpack配置放到config目录下之后，指定运行文件的目录： npx webpack serve --config ./config/webpack.dev.js
//生产模式下打包运行：  npx webpack --config ./config/webpack.prod.js
// 使用package.json中指令运行，前面不需要再加npx，会自动将bin目录添加到环境变量中
// 二.
// 开发模指令： webpack serve --config ./config/webpack.dev.js
// 生产模式指令： webpack --config ./config/webpack.prod.js
// 三.生产模式下配置
// 3-1.提取css成单独文件
// 不再使用style-loader（当 js 文件加载时，会创建一个 style 标签来生成样式），使用插件mini-css-extract-plugin（生成单独的 Css 文件，通过 link 标签加载）代替，
// 3-2.css兼容性处理
// postcss-loader postcss postcss-preset-env
// postcss-loader写在css-loader的后面，写在less-loader的前面，对loader写配置项时写成对象的形式
// 设置浏览器兼容性程度，通过在package.json中配置
//   "browserslist": [  三个条件的交集
//     "last 2 version",
//     "> 1%",  覆盖99%的浏览器
//     "not dead"
//   ]
// 3-3.css压缩  开发环境可以不压缩
//  css-minimizer-webpack-plugin 支持缓存和并发模式下运行

// 四.高级优化
//  1.SourceMap 方便开发与生产环境调式
// SourceMap（源代码映射）是一个用来生成源代码与构建后代码一一映射的文件的方案。

// 它会生成一个 xxx.map 文件，里面包含源代码和构建后代码每一行、每一列的映射关系。当构建后代码出错了，会通过 xxx.map 文件，从构建后代码出错位置找到映射后源代码出错位置，从而让浏览器提示源代码文件出错位置，帮助我们更快的找到错误根源。
// 开发模式：cheap-module-source-map 只包含行映射  devtool: "cheap-module-source-map",
// 生产模式：source-map  包含行/列映射  devtool: "source-map",
// 构建速度从快到慢分成五种：fastest fast ok slow  slowest

// 2.HotModuleReplacement 【只能在开发模块下使用，生产模块下HMR不能使用】（HMR/热模块替换）：在程序运行中，替换、添加或删除模块，而无需重新加载整个页面。
// style-loader实现了css热模块替换，而js还没有实现热模块替换
// 相关项目热替换需要使用对应loader：vue-loader, react-hot-loader
// 开发模块下 hot: true, // 开启HMR功能（只能用于开发环境，生产环境不需要了）（webpack5的默认值）
// js的热替换：// 判断是否支持HMR功能
// if (module.hot) {
// 	module.hot.accept("./js/count.js", function (count) {
// 		console.log('该模块热替换了');
// 	});
// }
// 3.oneoOf【可以在开发模块与生产模块中使用】
// 顾名思义就是每个文件只能匹配上一个 loader, 剩下的就不匹配了 rules: [{oneOf:[...loaders]}]
// 4.include exclude 两个只能使用其中一个  针对js文件来处理【babel/eslint】
// 5.cache 可以缓存之前的 Eslint 检查 和 Babel 编译结果，这样第二次打包时速度就会更快了
// 	loader: "babel-loader",
// 	options: {
// 	  cacheDirectory: true, // 开启babel编译缓存
// 	  cacheCompression: false, // 缓存文件不要压缩
// 	},
// 5.多进程 开启多进程同时处理 js 文件
// webpack v5 开箱即带有最新版本的 terser-webpack-plugin
// loader: "thread-loader", // 开启多进程
// 插件压缩内容也可以放到optimization.minimizer中
// 插件压缩css:new CssMinimizerPlugin()
// 插件压缩js:new TerserPlugin({parallel: threads // 开启多进程}) webpack5中内置，webpack4中需要下载  【重写该插件】
// 开发模式下没有压缩css与js，不需要使用这两个压缩插件，可以多进程配置
// 6.@babel/plugin-transform-runtime: 禁用了 Babel 自动对每个文件的 runtime 注入，而是引入 @babel/plugin-transform-runtime
// 避免了代码的重复定义，从@babel/plugin-transform-runtime中获取代码的引入，减少代码体积,原来每次引入都会被重复定义

